<template>
  <div class="EosResource">
    <el-popover
      placement="bottom"
      trigger="hover"
      v-if="cpuShow"
      style="display: inline-block;margin-left: 5px;">
      <div class="cpuPopCent">
        {{$t('myWallet.used')}}{{ usedCpu }} / {{$t('myWallet.total')}}{{ totalCpu }}
        ({{cpu_weight}})
        <span v-if="$route.meta.resource && $store.state.app.scatter.chain === 'eos'"
          class="colorThis hidden"
          style="cursor: pointer; margin-left: 10px; font-size: 13px;"
          @click="handleToGetCpu">{{$t('ndxStake.claimFreeCpu')}} ></span>
      </div>
      <div slot="reference" class="cpuPercent flex blackColor">
        <i class="iconfont icon-CPU"
          :class="{'orangeColor': cpuAddColor === 1,
          'redColor': cpuAddColor === -1}"></i>
        <span :class="{'redColor': cpuAddColor === -1}">{{ cpuPercent }}</span>
      </div>
    </el-popover>
    <div class="noticebox" v-if="nodeChecked"
    :class="getNodeClass" style="display: inline-block; cursor: pointer;" @click="handleChoiceNode">
      <i class="iconfont icon-wifiwofi"></i>
      <span class="delay litterDelay"
      v-if="nodeChecked.tip === 0">{{$t('public.lowLatency')}}</span>
      <span class="delay mediumLatency"
      v-else-if="nodeChecked.tip === 1">{{$t('public.mediumLatency')}}</span>
      <span class="delay highLatency"
      v-else-if="nodeChecked.tip === 2">{{$t('public.highLatency')}}</span>
      <span class="delay highLatency"
      v-else-if="nodeChecked.tip === 3">{{$t('public.timeOut')}}</span>
    </div>
  </div>
</template>

<script>
import Bus from '@/utils/bus';
import { toFixed, toNonExponential } from '@/utils/validate';

export default {
  name: 'EosResource', // eos资源
  data() {
    return {
      accoutRes: '', // 账户余额等数据
      usedCpu: '', // cpu使用量
      totalCpu: '', // cpu总量
      cpu_weight: '',
      cpuPercent: 0, // cpu使用百分比
      cpuAddColor: 0, // cup余额不同显示颜色
      cpuShow: false, // 是否显示cpu
      nodeChecked: {}, // 当前节点
      nodeAppStore: {}, // 节点列表
      getNodeClass: 'hidden',
    }
  },
  components: {},
  props: {},
  watch: {
    // 监听账户余额等数据
    '$store.state.app.accountRes': function change() {
      this.handleAccountRes();
    },
    '$store.state.app.scatter.chain': function change(val) {
      this.nodeChecked = this.nodeAppStore[val];
    },
    '$store.state.app.nodeChecked.timer': function change() {
      const chain = this.$store.state.app.scatter.chain || 'eos';
      this.nodeChecked = this.$store.state.app.nodeChecked[chain];
      const time = this.nodeChecked.time;
      const tip = this.nodeChecked.tip;
      this.nodeChecked = Object.assign({}, this.nodeChecked, { time, tip })
      if (tip === 0) {
        this.getNodeClass = 'nodeDelay'
      }
      if (tip === 1) {
        this.getNodeClass = 'mediumLatency'
      }
      if (tip === 2 || tip === 3) {
        this.getNodeClass = 'highLatency'
      }
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.nodeAppStore = this.$store.state.app.nodeChecked;
    this.nodeChecked = this.nodeAppStore[this.$store.state.app.scatter.chain || 'eos'];
  },
  beforeDestroy() {},
  methods: {
    // 切换节点
    handleChoiceNode() {
      Bus.$emit('handleChoiceNode', true);
    },
    // 获取cpu余额等信息
    handleAccountRes() {
      const res = this.$store.state.app.accountRes;
      if (!res) return;
      let cpuPercent = 100;
      if (res.cpu && res.cpu.max !== 0) {
        cpuPercent = toFixed(toNonExponential((res.cpu.used / res.cpu.max) * 100), 1);
      }
      const usedCpu = res.cpu.used;
      const totalCpu = res.cpu.max;
      this.cpuPercent = `${cpuPercent}%`;
      this.cpu_weight = res.total_resources.cpu_weight;
      this.cpuShow = true;
      this.handleCpuconver(usedCpu, 'usedCpu');
      this.handleCpuconver(totalCpu, 'totalCpu');
      if (cpuPercent < 60) {
        this.cpuAddColor = 0;
      }
      if (cpuPercent >= 60 && cpuPercent <= 80) {
        this.cpuAddColor = 1;
      }
      if (cpuPercent > 80) {
        this.cpuAddColor = -1;
      }
      this.$emit('listenEosResource', 'data', cpuPercent);
    },
    // CPU转化
    handleCpuconver(cpuVal, cpuString) {
      let cpu = '';
      if (cpuVal >= 1000000 && cpuVal < 60000000) {
        cpu = `${toFixed(cpuVal / 1000000, 2)}s`;
      } else if (cpuVal >= 60000000) {
        cpu = `${toFixed(cpuVal / 60000000, 2)}min`;
      } else {
        cpu = `${toFixed(cpuVal / 1000, 2)}ms`;
      }
      if (cpuString === 'usedCpu') {
        this.usedCpu = cpu;
      }
      if (cpuString === 'totalCpu') {
        this.totalCpu = cpu;
      }
    },
    handleToGetCpu() {
      this.$router.push({
        name: 'getCpu'
      })
    }
  },
}
</script>
<style lang="scss" scoped>
$-color-lv: #67C269;
$-color-ho: #EE1443;
$-color-black: #7b8db9;
.litterDelay {
  color: #333 !important;
}
.nodeDelay {
  color: #67c269 !important;
}
.mediumLatency {
  color: #FF9800 !important;
}
.highLatency {
  color: #E51C23 !important;
}

.color-lv {
  color: $-color-lv !important;
}
.color-ho {
  color: $-color-ho !important;
}
.redColor {
  color: #EE1443 !important;
}
.orangeColor {
  color: #FF9800 !important;
}

.EosResource {
  white-space: nowrap;

  .cpuPercent {
    color: #333;
    .icon-CPU {
      font-size: 23px;
      color: $-color-lv;
      margin-right: 6px;
    }
    span {
      font-size: 13px;
    }
  }
  .noticebox {
    margin-left: 8px;

    .icon-wifiwofi {
      display: inline-block;
      // vertical-align: top;
      height: 20px;
      width: 23px;
      font-size: 24px;
      margin-top: -6px;
      cursor: pointer;
    }

    .litterDelay {
      display: inline-block;
    }

    .delay {
      display: inline-block;
      height: 20px;
      line-height: 20px;
      vertical-align: text-bottom;
      margin-left: 2px;
    }
  }
}
// 黑夜版
.theme-1B1D27 {
  .cpuPercent {
    color: $-color-black;
  }
  .delay {
    color: #7b8db9 !important;
  }
  .highLatency {
    color: #E51C23 !important;
  }
}
</style>

